<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="../bootstrap/js/jquery-3.3.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/header.css">
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <link rel="stylesheet" type="text/css" href="../css/main2.css">
    <link rel="stylesheet" type="text/css" href="../css/manage.css">
    <link rel="stylesheet" type="text/css" href="../css/footer.css">

    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../element/css/index.css">
    <script src="../element/index.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/url.js"></script>
    <script src="../js/controller/headerController.js"></script>
    <script src="../js/service/headerService.js"></script>
    <script src="../js/controller/cinemaController.js"></script>
    <script src="../js/service/cinemaService.js"></script>

    <script src="../layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">

    <title>后台管理</title>
</head>

<body>
<!-- 导航栏 -->
<div id="header"></div>

<div id="cinema-vue">
    <!-- 主体 -->
    <div class="container">
        <div class="contents">
            <div class="nav-next">
                <div class="nav-title">
                    <h3>后台管理</h3>
                </div>
                <a class="cardId" href="user.html">用户管理</a>
                <a class="cardId" href="movie.html">影片管理</a>
                <a class="cardId" href="cinema.html">影院管理</a>
                <a class="cardId" href="hall.html">影厅管理</a>
                <a class="cardId" href="schedule.html">场次管理</a>
                <a class="cardId" href="comment.html">评论管理</a>
                <a class="cardId" href="order.html">订单管理</a>
            </div>
            <div class="nav-body">
                <!-- 影院管理 -->
                <div class="six card">
                    <div>
                        <div class="title">影院管理</div>
                        <hr/>
                    </div>
                    <!-- 影院列表 -->
                    <div class="cinemalist" v-show="operateCard=='index'">
                        <el-button type="primary" icon="el-icon-plus" plain round @click="changeOperateCard('add')">
                            添加影院
                        </el-button>
                        <!-- 占位符 -->
                        <div style="margin-top: 20px;"></div>
                        <el-table :data="cinemaList" border style="width: 100%">
                            <el-table-column fixed prop="cinemaName" label="影院名称" width="240"></el-table-column>
                            <el-table-column prop="cinemaAddress" label="影院地址" width="360"></el-table-column>
                            <el-table-column prop="hallTotal" label="现有影厅" width="80"></el-table-column>
                            <el-table-column prop="cinemaHotline" label="影院热线" width="120"></el-table-column>
                            <el-table-column fixed="right" label="操作">
                                <template slot-scope="scope">
                                    <el-button @click="changeOperateCard('detail',scope.row.cinemaId)" type="text"
                                               size="small">查看
                                    </el-button>
                                    <el-button @click="changeOperateCard('update',scope.row.cinemaId)" type="text"
                                               size="small">编辑
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--分页-->
                        <div style="margin-top: 20px">
                            <el-pagination background @size-change="handleSizeChange"
                                           @current-change="handleCurrentChange"
                                           :hide-on-single-page="value" :current-page="page.pageNum"
                                           :page-sizes="pageSizes"
                                           :page-size="page.pageSize" :pager-count="pagerCount" :total="page.total"
                                           layout="total, sizes, prev, pager, next, jumper">
                            </el-pagination>
                        </div>
                    </div>
                    <div v-show="operateCard=='add'">
                        <!--面包屑-->
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item>
                                <el-link type="primary" @click="changeOperateCard('index')">首页</el-link>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>添加影院</el-breadcrumb-item>
                        </el-breadcrumb>
                        <!--占位符-->
                        <div style="margin-top: 25px"></div>
                        <h3 class="addusertitle">影院详情</h3>
                        <div class="textside">
                            <div class="layui-form-item">
                                <label class="layui-form-label">影院名称</label>
                                <div class="layui-input-block addusertext">
                                    <input type="text" class="layui-input" v-model="cinema.cinemaName">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">影院品牌</label>
                                <div class="layui-input-block addusertext">
                                    <select type="text" class="layui-select" style="width: 270px"
                                            v-model="cinema.brandId">
                                        <option v-for="brand in brandList" :value="brand.brandId">
                                            {{brand.brandName}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">影院地址</label>
                                <div class="layui-input-block addusertext">
                                    <textarea class="layui-textarea"
                                              v-model="cinema.cinemaAddress"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">影院热线</label>
                                <div class="layui-input-block addusertext">
                                    <input type="text" class="layui-input" v-model="cinema.cinemaHotline">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">起购价</label>
                                <div class="layui-input-block addusertext">
                                    <input type="number" step="0.01" class="layui-input"
                                           v-model="cinema.startPurchasePrice">
                                </div>
                            </div>
                        </div>
                        <div style="text-align: left;float: left;width: 300px;">
                            <el-select v-model="cinemaDetail.newMovieList" multiple placeholder="请选择上映的影片">
                                <el-option
                                        v-for="movie in movieList"
                                        :key="movie.movieId"
                                        :label="movie.movieCnName"
                                        :value="movie.movieId">
                                </el-option>
                            </el-select>
                        </div>
                        <div style="text-align: center;float: left;width: 50px;">
                            <el-button type="primary" plain @click="addMovieOnCinemaDetail" style="margin-left: 0px;">
                                影片上映
                            </el-button>
                            <el-button type="info" plain @click="" disabled style="margin-left: 0px;margin-top: 30px;">
                                添加品牌
                            </el-button>
                            <el-button type="info" plain @click="" disabled style="margin-left: 0px;margin-top: 30px;">
                                影院服务
                            </el-button>
                            <el-button type="success" plain @click="addCinema"
                                       style="margin-top: 30px;">
                                保存
                            </el-button>
                        </div>
                        <div class="movie-grid">
                            <!--占位符-->
                            <div style="margin-top: 340px"></div>

                            <div class="panel-header">
                                <span class="panel-more">
                                    <a class="textcolor_red" data-act="all-playingMovie-click"
                                       @click="changeShowPage('+')">
                                        <span>下一页</span>
                                    </a>
                                </span>
                                <span class="panel-more" style="margin-right: 10px;">
                                    <a class="textcolor_red" data-act="all-playingMovie-click"
                                       @click="changeShowPage('-')">
                                        <span>上一页</span>
                                    </a>
                                </span>
                                <span class="panel-title hot-title">
                                    <span class="textcolor_red">影片上映（{{cinemaDetail.movies.length}}部）</span>
                                </span>
                            </div>
                            <div class="panel-content">
                                <ul class="movie-list movie-hot">
                                    <!-- 热播列表 -->
                                    <li v-for="(movie,index) in cinemaDetail.movies"
                                        v-if="index>=(cinemaDetail.showPage-1)*8 && index<8*cinemaDetail.showPage">
                                        <div class="movie-item">
                                            <a target="_blank" data-act="playingMovie-click" data-val="2">
                                                <div class="movie-poster" style="cursor:default;">
                                                    <img :src="movie.moviePicture">
                                                    <div class="movie-overlay movie-overlay-bg">
                                                        <div class="movie-info">
                                                            <div class="movie-score"><i
                                                                    class="integer">{{movie.movieScore}}</i>
                                                            </div>
                                                            <div class="movie-title movie-title-padding"
                                                                 :title="movie.movieCnName">{{movie.movieCnName}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                            <div class="movie-detail movie-detail-strong movie-sale">
                                                <a class="active" target="_blank" data-act="salePlayingMovie-click"
                                                   data-val="{movieid:42964}"
                                                   @click="deleteMovieOnCinemaDetail(movie.movieId,0)">
                                                    移 除</a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div v-show="operateCard=='update'">
                        <!--面包屑-->
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item>
                                <el-link type="primary" @click="changeOperateCard('index')">首页</el-link>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>修改影院</el-breadcrumb-item>
                        </el-breadcrumb>
                        <!--占位符-->
                        <div style="margin-top: 25px"></div>

                        <h3 class="addusertitle">影院详情</h3>
                        <div class="textside">
                            <div class="layui-form-item">
                                <label class="layui-form-label">影院名称</label>
                                <div class="layui-input-block addusertext">
                                    <input type="text" class="layui-input" v-model="cinemaDetail.cinema.cinemaName">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">影院品牌</label>
                                <div class="layui-input-block addusertext">
                                    <select type="text" class="layui-select" style="width: 270px"
                                            v-model="cinemaDetail.cinema.brandId">
                                        <option v-for="brand in brandList" :value="brand.brandId">
                                            {{brand.brandName}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">影院地址</label>
                                <div class="layui-input-block addusertext">
                                    <textarea class="layui-textarea"
                                              v-model="cinemaDetail.cinema.cinemaAddress"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">影院热线</label>
                                <div class="layui-input-block addusertext">
                                    <input type="text" class="layui-input" v-model="cinemaDetail.cinema.cinemaHotline">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">起购价</label>
                                <div class="layui-input-block addusertext">
                                    <input type="number" step="0.01" class="layui-input"
                                           v-model="cinemaDetail.cinema.startPurchasePrice">
                                </div>
                            </div>
                        </div>
                        <div style="text-align: left;float: left;width: 300px;">
                            <el-select v-model="cinemaDetail.newMovieList" multiple placeholder="请选择上映的影片">
                                <el-option
                                        v-for="movie in movieList"
                                        :key="movie.movieId"
                                        :label="movie.movieCnName"
                                        :value="movie.movieId">
                                </el-option>
                            </el-select>
                        </div>
                        <div style="text-align: center;float: left;width: 50px;">
                            <el-button type="primary" plain @click="addMovieOnCinemaDetail" style="margin-left: 0px;">
                                影片上映
                            </el-button>
                            <el-button type="info" plain @click="" disabled style="margin-left: 0px;margin-top: 30px;">
                                添加品牌
                            </el-button>
                            <el-button type="info" plain @click="" disabled style="margin-left: 0px;margin-top: 30px;">
                                影院服务
                            </el-button>
                            <el-button type="success" plain @click="updateCinema"
                                       style="margin-left: 0px;margin-top: 30px;">
                                提交修改
                            </el-button>
                        </div>
                        <div class="movie-grid">
                            <!--占位符-->
                            <div style="margin-top: 340px"></div>

                            <div class="panel-header">
                                <span class="panel-more">
                                    <a class="textcolor_red" data-act="all-playingMovie-click"
                                       @click="changeShowPage('+')">
                                        <span>下一页</span>
                                    </a>
                                </span>
                                <span class="panel-more" style="margin-right: 10px;">
                                    <a class="textcolor_red" data-act="all-playingMovie-click"
                                       @click="changeShowPage('-')">
                                        <span>上一页</span>
                                    </a>
                                </span>
                                <span class="panel-title hot-title">
                                    <span class="textcolor_red">已经上映（{{cinemaDetail.movies.length}}部）</span>
                                </span>
                            </div>
                            <div class="panel-content">
                                <ul class="movie-list movie-hot">
                                    <!-- 热播列表 -->
                                    <li v-for="(movie,index) in cinemaDetail.movies"
                                        v-if="index>=(cinemaDetail.showPage-1)*8 && index<8*cinemaDetail.showPage">
                                        <div class="movie-item">
                                            <a target="_blank" data-act="playingMovie-click" data-val="2">
                                                <div class="movie-poster" style="cursor:default;">
                                                    <img :src="movie.moviePicture">
                                                    <div class="movie-overlay movie-overlay-bg">
                                                        <div class="movie-info">
                                                            <div class="movie-score"><i
                                                                    class="integer">{{movie.movieScore}}</i>
                                                            </div>
                                                            <div class="movie-title movie-title-padding"
                                                                 :title="movie.movieCnName">{{movie.movieCnName}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                            <div class="movie-detail movie-detail-strong movie-sale">
                                                <a class="active" target="_blank" data-act="salePlayingMovie-click"
                                                   data-val="{movieid:42964}"
                                                   @click="deleteMovieOnCinemaDetail(movie.movieId,cinemaDetail.cinema.cinemaId)">
                                                    移 除</a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div v-show="operateCard=='detail'">
                        <!--面包屑-->
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item>
                                <el-link type="primary" @click="changeOperateCard('index')">首页</el-link>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>修改影院</el-breadcrumb-item>
                        </el-breadcrumb>
                        <!--占位符-->
                        <div style="margin-top: 25px"></div>

                        <h3 class="addusertitle">影院基本信息</h3>
                        <div class="textside">
                            <div style="font-size: 20px;font-family: '幼圆';">
                                <span style="margin-left: 30px">影院名称：</span>
                                <span>{{cinemaDetail.cinema.cinemaName}}</span>
                            </div>
                            <div style="font-size: 20px;font-family: '幼圆';">
                                <span style="margin-left: 30px">影院品牌：</span>
                                <span v-for="brand in brandList">
                                    <span v-show="cinemaDetail.cinema.brandId==brand.brandId">{{brand.brandName}}</span>
                                </span>
                            </div>
                            <div style="font-size: 20px;font-family: '幼圆';">
                                <span style="margin-left: 30px">影院热线：</span>
                                <span>{{cinemaDetail.cinema.cinemaHotline}}</span>
                            </div>
                            <div style="font-size: 20px;font-family: '幼圆';">
                                <span style="margin-left: 30px">起购价格：</span>
                                <span>￥{{cinemaDetail.cinema.startPurchasePrice}}</span>
                            </div>
                        </div>
                        <div style="text-align: left;float: left;width: 140px;">
                            <div style="font-size: 20px;font-family: '幼圆';">
                                <span style="margin-left: 30px">影院地址：</span>
                            </div>
                        </div>
                        <div style="text-align: left;float: left;width: 320px;">
                            <div style="font-size: 20px;font-family: '幼圆';">
                                <span>{{cinemaDetail.cinema.cinemaAddress}}</span>
                            </div>
                        </div>
                        <div style="margin-top: 160px">
                            <div v-show="cinemaDetail.advantages.length>0">
                                <el-divider>影院服务</el-divider>
                                <div class="features-group">
                                    <div class="feature" v-for="advantage in cinemaDetail.advantages">
                                        <span class="tag ">{{advantage.servicesName}}</span>
                                        <p class="desc text-ellipsis">{{advantage.servicesDescribe}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="movie-grid" style="margin-top: 60px">
                            <div class="panel-header">
                                <span class="panel-more">
                                    <a class="textcolor_red" data-act="all-playingMovie-click"
                                       @click="changeShowPage('+')">
                                        <span>下一页</span>
                                    </a>
                                </span>
                                <span class="panel-more" style="margin-right: 10px;">
                                    <a class="textcolor_red" data-act="all-playingMovie-click"
                                       @click="changeShowPage('-')">
                                        <span>上一页</span>
                                    </a>
                                </span>
                                <span class="panel-title hot-title">
                                    <span class="textcolor_red">影片上映（{{cinemaDetail.movies.length}}部）</span>
                                </span>
                            </div>
                            <div class="panel-content">
                                <ul class="movie-list movie-hot">
                                    <!-- 热播列表 -->
                                    <li v-for="(movie,index) in cinemaDetail.movies"
                                        v-if="index>=(cinemaDetail.showPage-1)*4 && index<4*cinemaDetail.showPage">
                                        <div class="movie-item">
                                            <a target="_blank" data-act="playingMovie-click" data-val="2">
                                                <div class="movie-poster" style="cursor:default;">
                                                    <img :src="movie.moviePicture">
                                                    <div class="movie-overlay movie-overlay-bg">
                                                        <div class="movie-info">
                                                            <div class="movie-score"><i
                                                                    class="integer">{{movie.movieScore}}</i>
                                                            </div>
                                                            <div class="movie-title movie-title-padding"
                                                                 :title="movie.movieCnName">{{movie.movieCnName}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--加载页头-->
<script>
    // 当文档加载完成后执行
    $(document).ready(function () {
        // 加载页头
        $("#header").load("header.html")
    })
</script>

<script>
    var vueapp = new Vue({
        el: "#cinema-vue",
        data: {
            cinemaList: '',             // 记录当前页的所有影院信息
            movieList: [],              // 影片列表
            brandList: [],              // 影院的品牌列表
            operateCard: 'index',       // 显示的卡片功能 'index'表示主界面，'add'表示添加, 'update'表示修改等
            cinema: {
                cinemaName: '',         // 影院名称
                cinemaAddress: '',      // 影院地址
                cinemaHotline: '',      // 影院热线
                startPurchasePrice: '', // 影院起购价
                brandId: '',            // 影院品牌
            },
            cinemaDetail: {
                cinema: '',             // 影院的基本信息
                movies: [],             // 影院提供播放的所有电影
                advantages: [],         // 影院提供的所有服务
                newMovieList: [],       // 新添加的上映影片
                showPage: 1,            // 上映影片的显示页面
            },

            page: "",					// 分页参数
            value: true,				// 是否开启分页隐藏功能
            pageSizes: [3, 6, 9, 12],   // 每页条数选项列表
            pagerCount: 5				// 导航按钮数
        },
        watch: {
            // 监听卡片的变化
            "operateCard": cinema_yh_service.watchCard,
        },
        methods: {
            findCinemaAll: cinema_yh_controller.findCinemaAll,
            findMovieAll: cinema_yh_controller.findMovieAll,
            findCinemaBrandAll: cinema_yh_controller.findCinemaBrandAll,
            findCinemaDetailById: cinema_yh_controller.findCinemaDetailById,
            deleteMovieOnCinemaDetail: cinema_yh_controller.deleteMovieOnCinemaDetail,
            addMovieOnCinemaDetail: cinema_yh_controller.addMovieOnCinemaDetail,
            addCinema: cinema_yh_controller.addCinema,
            updateCinema: cinema_yh_controller.updateCinema,
            changeOperateCard: cinema_yh_service.changeOperateCard,
            changeShowPage: cinema_yh_service.changeShowPage,

            // 分页功能 改变下拉框中每页的记录数时触发
            handleSizeChange: cinema_yh_service.handleSizeChange,
            // 分页功能 点击导航按钮时触发
            handleCurrentChange: cinema_yh_service.handleCurrentChange,
        },
        created: cinema_yh_service.created,
    })
</script>
</body>

</html>